<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应两栏布局</title>

    <style>
        /* 
          每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
          又因为：BFC的区域不会与float box重叠(要接触又不能重叠所以就靠在它的后面)
        
        
        */
        .box1 {
            width: 200px;
            height: 200px;
            background-color: lavenderblush;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            overflow: hidden;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>